Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empty state: add text wrap balance to empty state text #2026

Merged
merged 1 commit into from
Nov 21, 2024

Conversation

monicawheeler
Copy link
Collaborator

@monicawheeler monicawheeler commented Nov 21, 2024

Description

DSS-1195
Implement text-wrap: balance to create a more visually appealing appearance to text in an empty state. Balancing the text wrapping leads to even distribution of text between lines, making the text easier to read and more aesthetically pleasing.

Browser support is supported across the major browsers: Chrome, Firefox, Edge, and Safari

Solution

  • Add text-wrap: balance to .sage-empty-state__text
  • Add more text in the examples to showcase the use of balanced text wrapping

Screenshots

Before After
before after

Testing in sage-lib

  1. navigate to http://localhost:4000/pages/component/empty_state?tab=preview
  2. verify that the text wraps appropriately if you add more content in the empty state text slot

Testing in kajabi-products

  1. (LOW) This CSS style is low impact, no QE needed

@monicawheeler monicawheeler self-assigned this Nov 21, 2024
@monicawheeler monicawheeler marked this pull request as ready for review November 21, 2024 18:16
@monicawheeler monicawheeler requested a review from a team November 21, 2024 18:16
Copy link
Member

@pixelflips pixelflips left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 👍🏼

@pixelflips pixelflips requested a review from a team November 21, 2024 18:17
Copy link
Contributor

@FuturaExtraBold FuturaExtraBold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@monicawheeler monicawheeler requested a review from a team November 21, 2024 18:28
Copy link
Contributor

@anechol anechol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this!

@monicawheeler monicawheeler merged commit 48a06cf into develop Nov 21, 2024
7 checks passed
@monicawheeler monicawheeler deleted the dss-1195-text-wrap-empty-state branch November 21, 2024 18:46
@monicawheeler monicawheeler mentioned this pull request Nov 21, 2024
ju-Skinner pushed a commit that referenced this pull request Nov 22, 2024
* style: adjust padding on bulk actions (#2023)

* style(empty state): add text wrap balance to empty state text (#2026)

* chore(deps): bump @pine-ds/icons from 8.10.0 to 8.11.0 (#2025)

Bumps [@pine-ds/icons](https://github.com/Kajabi/pine-icons) from 8.10.0 to 8.11.0.
- [Release notes](https://github.com/Kajabi/pine-icons/releases)
- [Changelog](https://github.com/Kajabi/pine-icons/blob/main/CHANGELOG.md)
- [Commits](Kajabi/pine-icons@v8.10.0...v8.11.0)

---
updated-dependencies:
- dependency-name: "@pine-ds/icons"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Monica Wheeler <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants